<script setup lang="ts">
import ClueDetail from './ClueDetail.vue'
import ClueItemsDetail from './ClueItemsDetail.vue'

defineProps({
  isNoteRequired: {
    type: Boolean,
    default: false
  }
})
</script>

<template>
  <template v-if="isNoteRequired">
    <div class="bd-title">鉴定流程</div>
    <div class="bd-flow bd-card">
      <div class="step finished">无需鉴定</div>
    </div>
    <div class="br"></div>
  </template>

  <ClueDetail />
  <div class="br"></div>

  <ClueItemsDetail />
  <div class="br"></div>
</template>

<style scoped lang="scss">
.bd-title {
  font-size: 26rem;
  margin-bottom: 30rem;
  color: #048c5e;
  line-height: 1;
}

.bd-card {
  padding: 20rem;
  background-color: #e1e1e1;
}

.bd-flow {
  display: flex;
  align-items: center;
  padding: 20rem 20rem 30rem;
  gap: 0 1.5em;

  .step {
    padding: 10rem 15rem;
    background-color: #e1e1e1;

    &.finished {
      color: #fff;
      background-color: #6cb187;
    }
  }
}
</style>
